<!-- 专家申请 -->
<template>
	<view style="width: 100%;">
		<view style="width: 100%;height: 100%;">
			<uni-nav-bar title="专家申请" @clickLeft="back" left-icon="left" backgroundColor="#fff" color="#000"
				statusBar="true">
			</uni-nav-bar>
			<view v-if="true">
				<scroll-view class="scrollheight" scroll-y="true" :style="{height:setcollapseheight() - 90 + 'px'}">
				<u--form labelPosition="left" :model="model" :rules="rules" ref="form">
					<!-- 0.运营方 -->
					<u-form-item label="入驻运营方" prop="formData.operatorName" borderBottom>
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/service/huodongyunying.png" mode="heightFix"></image>
						</view>
						<picker mode=selector @cancel="selectOperatorClose" @change="selectOperator" range-key="name"
							:value="model.formData.operatorName" :range="operatorList">
							<u--input v-model="model.formData.operatorName" style="pointer-events: none" disabled
								disabledColor="#ffffff" placeholder="请选择运营方" border="none"></u--input>
							<u-icon name="arrow-down"></u-icon>
						</picker>
					</u-form-item>
					<!-- 1.职称 -->
					<u-form-item label="职称" prop="formData.qualifications">
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/service/fuwufang.png" mode="heightFix"></image>
						</view>
						<u--input v-model="model.formData.qualifications" placeholder='请输入职称' border="none"></u--input>
					</u-form-item>
					<!-- 2.擅长领域 -->
					<u-form-item label="擅长领域" prop="formData.domain">
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/service/fuwufang.png" mode="heightFix"></image>
						</view>
						<u--input v-model="model.formData.domain" placeholder='请输入擅长领域' border="none"></u--input>
					</u-form-item>
					<!-- 3.就职单位 -->
					<u-form-item label="就职单位" prop="formData.unit">
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/service/huodongyunying.png" mode="heightFix"></image>
						</view>
						<u--input v-model="model.formData.unit" placeholder='请输入就职单位' border="none"></u--input>
					</u-form-item>
					<!-- 4.工龄 -->
					<u-form-item label="工龄" prop="formData.age">
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/service/fuwufang.png" mode="heightFix"></image>
						</view>
						<u--input v-model="model.formData.age" type="number" placeholder='请输入工龄' border="none"></u--input>
					</u-form-item>
					
					<!-- 5.机构法人 -->
					<u-form-item label="姓名" prop="formData.contactor">
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/machinery/xingming.png" mode="heightFix"></image>
						</view>
						<u--input v-model="model.formData.contactor" placeholder='请输入姓名' border="none"></u--input>
					</u-form-item>
					<!-- 6.联系电话 -->
					<u-form-item label="联系电话" prop="formData.contactPhone">
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/service/lianxidianhua.png" mode="heightFix"></image>
						</view>
						<u--input v-model="model.formData.contactPhone" placeholder='请输入联系方式' type="number"
							border="none"></u--input>
					</u-form-item>
					<!-- 7.身份证  -->
					<u-form-item label="身份证" prop="formData.imgList" style="background-color: #E2E7F8;">
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/service/yingyezhizhao.png" mode="heightFix"></image>
						</view>
						<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							deletable :maxCount="2">
							<view class="uploadBtns">
								<view v-if="fileList.length < 1">
									上传正面
								</view>
								<view style="margin-left: 30rpx;" v-if="fileList.length < 2">
									上传反面
								</view>
							</view>
						</u-upload>
					</u-form-item>
				</u--form>
				</scroll-view>
				<view class="record-add-view">
					<!-- 提交 -->
					<view class="submit">
						<button @click="application" class="submit-btn">
							<text>提交申请入驻</text>
						</button>
					</view>
				</view>
			</view>
			<view class="blank" v-else>
				<image src="@/static/blank.png" mode="heightFix"></image>
				<view class="title">
					您近期已申请过入驻，您可以在消息功能中留意入驻申请结果。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import agriculturalApi from '@/api/socialized-servce/agricultural-information/index.js'
	import API from '@/api/socialized-servce/farm-service/person-message/server-application/index.js'
	import {
		agrServiceUrl
	} from '@/config/baseUrl.js'
	export default {
		data() {
			return {
				operatorList: [],
				model: {
					formData: {
						operatorName: '',
						serviceProviderNo: '',
						userId: uni.getStorageSync('userId'),
						qualifications: '',
						domain: '',
						unit: '',
						age: null,
						contactor: '',
						contactPhone: '',
						imgList: [],
					}
				},
				rules: {
					'formData.operatorName': {
						type: 'string',
						required: true,
						message: '请选择入驻运营方',
						trigger: ['blur', 'change']
					},
					'formData.qualifications': {
						type: 'string',
						required: true,
						message: '职称不能为空',
						trigger: ['blur', 'change']
					},
					'formData.domain': {
						type: 'string',
						required: true,
						message: '擅长领域不能为空',
						trigger: ['blur', 'change']
					},
					'formData.unit': {
						type: 'string',
						required: true,
						message: '就职单位不能为空',
						trigger: ['blur', 'change']
					},
					'formData.age': {
						type: 'number',
						required: true,
						message: '工龄不能为空',
						trigger: ['blur', 'change']
					},
					
					'formData.contactor': {
						type: 'string',
						required: true,
						message: '姓名不能为空',
						trigger: ['blur', 'change']
					},
					'formData.contactPhone': [{
							type: 'string',
							required: true,
							message: '联系电话不能为空',
							trigger: ['blur', 'change']
						},
						{
							type: 'string',
							validator: (rule, value, callback) => {
								if (value.length <= 11) {
									if (value != '') {
										return this.$u.test.mobile(value)
									}
								} else {
									return false
								}
							},
							message: '手机号格式不对,请输入正确的手机号',
							trigger: ['blur', 'change']
						}
					],
					'formData.imgList': [
						{
							type: 'array',
							required: true,
							message: '请上传身份证正反面',
							trigger: ['blur', 'change']
						},
						{
							type: 'array',
							validator: (rule, value, callback) => {
								if (value.length <= 1) {
									return false
								} else {
									return true
								}
							},
							message: '请上传正反面',
							trigger: ['blur','change']
						}
					]
				},
				// 图片
				fileList: [],
				timer: null
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		created() {
			let userServerInfo = JSON.parse(uni.getStorageSync('userServerInfo'))
			this.model.formData.contactor = userServerInfo.userName
			this.model.formData.contactPhone = userServerInfo.phoneNumber
			this.getOperator()
		},
		mounted() {
			this.setcollapseheight()
		},
		beforeDestroy() {
			this.timer = null
		},
		methods: {
			// 查询运营方
			async getOperator() {
				let params = {
					status: 0
				}
				let res = await agriculturalApi.queryOperator(params)
				if(res.code === 200) {
					this.operatorList = res.data
				}
			},
			// 选择运营方
			selectOperatorClose() {
				this.$refs.form.validateField('formData.operatorName')
			},
			selectOperator(e) {
				this.model.formData.operatorName = this.operatorList[e.detail.value].name
				this.model.formData.serviceProviderNo = this.operatorList[e.detail.value].serviceProviderNo
				this.$refs.form.validateField('formData.operatorName')
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.model.formData.imgList.splice(event.index, 1)
				this.$refs.form.validateField('formData.imgList')
			},
			// 身份证
			async afterRead(event) {
				this.type = 'image'
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: `${agrServiceUrl}${result.slice(1)}`
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: agrServiceUrl + `common/file/upDown/getUploadUrl?moduleType=XG_ORGANIZATION&upDownType=FTP`,
						filePath: url,
						name: 'file',
						header: {
							'token': uni.getStorageSync("satoken") || ''
						},
						formData: {},
						success: async (res) => {
							const dataObj = JSON.parse(res.data);
							const data = dataObj.data;
							console.log(data, '图片');
							resolve(data);
							if (this.type == 'image') {
								this.model.formData.imgList.push({
									imgId: data.slice(33),
									imgUrl: `${agrServiceUrl}${data.slice(1)}`
								})
								this.$refs.form.validateField('formData.imgList')
							} else if (this.type == 'image1') {
								this.model.formData.imgList1.push({
									imgId: data.slice(33),
									imgUrl: `${agrServiceUrl}${data.slice(1)}`
								})
								this.$refs.form.validateField('formData.imgList1')
							}
						},
						fail: () => {
							uni.showToast({
								title: '图片上传失败',
								icon: 'error'
							})
						}
					});
				})
			},
			// 申请入驻
			application() {
				this.$refs.form.validate().then(async () => {
					console.log("提交表单信息:" ,this.model.formData);
					let {serviceProviderNo,age,contactPhone,contactor,qualifications,domain,unit} = this.model.formData
					let params = {
						serviceProviderNo,
						name: contactor,
						phone: contactPhone,
						seniority: age,
						position: qualifications,
						area: domain,
						workplace: unit
					}
					delete params.imgList
					// 机构图片
					if(this.model.formData.imgList.length === 2) {
						params['frontIdcard'] = this.model.formData.imgList[0].imgUrl
						params['backIdcard'] = this.model.formData.imgList[1].imgUrl
					}
					let res = await API.expertApplication(params)
					if (res.code === 200) {
						uni.showToast({
							title: '专家申请成功',
							icon: 'success'
						})
						this.timer = setTimeout(()=>{
							uni.reLaunch({
								url: '/pages/socialized-service/person-message/person-message'
							})
						},500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				}).catch(errors => {
					console.log("失败信息:" + JSON.stringify(errors))
				})
			},
			back() {
				uni.reLaunch({
					url: '/pages/socialized-service/person-message/person-message'
				})
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				// let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				winHeight = parseInt(winHeight) - topheightone
				// #ifndef H5
				winHeight = winHeight
			
				// #endif
				return winHeight
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-form {
		padding: 0 32rpx;
		.u-form-item {
			position: relative;
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;
			&:nth-child(n+9) {
				background-color: #E2E7F8;
			}
		}
		// 左侧img
		.left-image {
			position: absolute;
			left: 0;
			width: 54rpx;
			height: 54rpx;
			border-radius: 50%;
			margin-left: 22rpx;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			
			.left-img {
				height: 26rpx;
			}
		}
		
		.u-form-item__body__left {
			width: 200rpx !important;
			margin-left: 50px;
		}
		
		// 右侧icon
		.u-icon--right {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		// 上传图片
		.u-upload__deletable__icon {//删除icon
			top: 12rpx;
			right: 2rpx;
			transform: scale(1.7);
		}
		
		.uploadBtns {//身份证
			display: flex;
		}
		.u-upload__wrap {
			display: flex!important;
			align-items: center;
		}
	}
	
	.blank {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
	
		image {
			width: 104rpx;
			height: 114rpx;
		}
	
		.title {
			padding: 0 96rpx;
			padding-top: 38rpx;
			font-size: 32rpx
		}
	}
	
	.submit {
		margin-top: 60rpx;
		// position: absolute;
		// bottom: 150rpx;
		// left: 50%;
		// transform: translateX(-50%);
	
		.submit-btn {
			width: 340rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
	
			.icon-submit {
				margin-right: 10rpx;
			}
		}
	}

	
	.uni-input-input {
		pointer-events: none;
	}
</style>